<template>
  <el-dialog
    :title="titleMsg"
    :close-on-click-modal="false"
    append-to-body
    v-model="is_show"
    :before-close="beforeClose"
    width="550px"
    class="agentDetail_page"
  >
    <div>{{ data.user.nickName }}，您好！</div>
    <div class="comtent_box" v-html="content"></div>
    <div class="url_box">
      <!-- <div
        class="url_name"
        v-for="(item, index) in urlNameList"
        :key="index"
        @click="urlItem(index)"
      >
        <span> {{ item }}</span>
      </div> -->
    </div>
    <template #footer>
      <div class="dialog-footer">
        <span style="margin-right: 12px">
          <el-button type="primary" @click="handleFlag"> 已阅 </el-button>
        </span>
        <span
          style="margin-right: 12px"
          class="url_name"
          v-for="(item, index) in urlNameList"
          :key="index"
        >
          <el-button type="primary" @click="urlItem(index)">
            {{ item }}
          </el-button>
        </span>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="agentDetail">
import { ref, reactive, computed, getCurrentInstance } from 'vue'
import {
  getTodoMessageDetail,
  getTodoMessageHandle
} from '@/api/businessSettings/agent'
import { getUserProfile } from '@/api/system/user'
import { useRouter } from 'vue-router'
// import Vue from 'vue'

const router = useRouter()
const route = useRouter()
const loading = ref(false)
const props = defineProps({
  rowId: {
    type: String
  },
  titleMessage: {
    type: String
  }
})
const data = reactive({
  titleMsg: props.titleMessage ? props.titleMessage : '消息提醒',
  typeId: '',
  content: '',
  user: {},
  urlNameList: [],
  urlList: [],
  handleForm: {
    id: ''
  }
})

const { content, urlNameList, urlList, typeId, handleForm, titleMsg } =
  toRefs(data)
const { proxy } = getCurrentInstance()
const is_show = computed(() => {
  return true
})

function beforeClose() {
  proxy.$emit('closeDialog')
}
function handleFlag() {
  handleForm.value.id = props.rowId
  console.log('handleForm', handleForm.value)
  getTodoMessageHandle(handleForm.value).then(res => {
    console.log('res==', res)
  })
  proxy.$emit('closeDialog')
}
async function init() {
  await getTodoMessageDetail({ id: props.rowId }).then(res => {
    if (res.code == 200) {
      content.value = res.data.content
      typeId.value = res.data.type
      urlList.value = res.data.url == null ? '' : res.data.url.split(',')
      const str = res.data.urlName
      urlNameList.value = str ? str.split(',') : ''
      console.log('urlList====', urlList.value)
    }
  })
}
init()
getUser()
//获取用户信息
function getUser() {
  getUserProfile().then(response => {
    data.user = response.data
  })
}
//消息跳转
function urlItem(index) {
  const url = urlList.value[index]
  const str = url.split('?')
  const urlName = str[1] ? str[1].split('&') : ''

  const urlLink = {}
  for (var i = 0; i < urlName.length; i++) {
    urlLink[urlName[i].split('=')[0]] = urlName[i].split('=')[1]
  }
  if (url.includes('taskProcessing') && props.rowId) {
    urlLink.rowId = props.rowId
  }
  if (typeId.value == '1') {
    router.push({
      path: `/${str[0]}/`,
      query: urlLink
    })
  } else {
    router.push({
      path: `${str[0]}`,
      query: urlLink
    })
  }
}
</script>
<style lang="scss" scoped>
:deep .el-dialog__header {
  border-bottom: 1px solid #eee;
  margin-right: 0;
}
:deep .el-dialog__footer {
  height: 50px;
  display: flex;
}
.agentDetail_page {
  .comtent_box {
    text-indent: 2em;
    padding: 10px 0;
  }
  .url_box {
    display: inline-block;
    justify-content: space-around;
    flex-flow: row wrap;
    padding: 16px 0;
    text-indent: 2em;
    cursor: pointer;
    .url_name {
      float: left;
      width: 110px;
      padding-right: 12px;
      color: #1890ff;
    }
  }
}
</style>
